<!-- 首页的推荐官列表 -->

<template>
	<view @click="click_recommender_item" class="background_white flex_col center"
		style="margin:6rpx;margin-right: 24rpx;width:632rpx;box-shadow: 0 4rpx 16rpx 0 rgba(209, 211, 217, 0.16);padding: 20rpx 10rpx;border-top-right-radius: 12rpx;border-top-left-radius: 52rpx;border-bottom-left-radius: 12rpx;border-bottom-right-radius: 12rpx;">
		<!-- <view
			style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;">
			<view v-for="(item,index) in recommond_images" :key="index">
				<fl_image :style="{'margin': index % 2 != 1 ? '0 4rpx 0 0' : '0 0 0 4rpx'}" :src="item" height="200" width="200" style="border-radius: 10rpx;"></fl_image>
			</view>
		</view> -->

		<!-- 个人信息 -->
		<!-- <view class="flex_row" style="margin-top: 20rpx;">
			<fl_image height="64" width="64" :circle="true" :src="recommender.header_icon" :compress="false"></fl_image>
			<view class="flex_col" style="margin-left: 18rpx;">
				<view style="font-size: 22rpx;color: grey;">{{recommender.recommender_name}}</view>
				<view style="font-size: 18rpx;color: #00C2C4;">共{{recommender.count}}件优秀货盘</view>
			</view>
			<view class="flex"></view>
			<view class="flex_row center" style="margin-top: 18rpx;">
				<text class="iconfont icon_eye" style="font-size: 24rpx;color: grey;"/>
				<view style="font-size: 20rpx;color: #797979;margin-left: 8rpx;">{{recommender.page_view}}</view>
			</view>
		</view> -->


		<view class="flex_row full_width" style="margin-left: 20rpx;">
			<fl_image avatar :circle="true" height="100" width="100" :src="recommender.header_icon" :compress="false" />
			<view class="flex_col center" style="margin-left: 12rpx;">
				<view style="font-size: 28rpx;color: black;" class="single_line">{{recommender.recommender_name}}</view>
				<view v-if="recommender.recommender_tags.length != 0" style="margin-top: 8rpx;"></view>
				<view v-if="recommender.recommender_tags.length != 0" class="flex_row">
					<view v-for="item,index in recommender.recommender_tags" :key="index">
						<view
							style="margin-right: 20rpx;font-size: 20rpx;color: #00C2C4;padding: 10rpx;background-color: rgba(204, 243, 243, 0.4);border-radius: 8rpx;">
							{{item}}</view>
				</view>
			</view>
		</view>
		<view class="flex" />
	</view>
	
	<!-- 图片 -->
	<view style="margin-top: 10rpx;width:620rpx;padding-left: 13rpx;" class="flex_row center flex">
		<view v-for="(item,index) in recommond_images" :key="index">
			<fl_image :compress="false" :src="item" height="196" width="196" style="margin-right:16rpx;border-radius: 10rpx;"></fl_image>
		</view>
	</view>
	<!-- 数量和浏览数量 -->
	<view class="flex_row center" style="width:620rpx;margin: 0 40rpx;margin-top: 24rpx;">
		<view style="font-size: 20rpx;color: #9DA6B5;">优质货盘 {{recommender.count}}</view>
		<view class="flex" />
		<view class="flex_row center">
			<text class="iconfont icon_eye" style="font-size: 24rpx;color: #9DA6B5;" />
			<view style="font-size: 24rpx;color: #9DA6B5;margin-left: 8rpx;">{{recommender.page_view}}</view>
		</view>
	</view>

	</view>
</template>

<script>
	import store from "../../utils/store.js"
	import fl_image from "../fl_image.vue"
	export default {
		components: {
			fl_image,
		},
		name: "main_recommender_item",
		data() {
			return {
				recommond_images: [

				],
			};
		},
		watch:{
			recommender(new_val){
				this.recommender = new_val
			}
		},
		created() {
			this.recommond_images = this.recommender.recommend_products
		},
		methods: {
			click_recommender_item() {
				this.$emit("click_recommender_item", this.recommender)
			},
		},
		mounted() {

		},
		props: {
			recommender: {
				type: Object,
				default: null
			}
		}
	}
</script>

<style>
	.background {
		background-image: url("http://pic1.win4000.com/wallpaper/e/57bff12242d98.jpg");
	}

	.gridient_back {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
	}
</style>
